<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Dialogs in Ruby Qt</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, dialogs, Qt, Ruby">
<meta name="description" content="This part of the Ruby Qt tutorial covers dialogs.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Dialogs</h1>

<p>
In this part of the Ruby Qt programming tutorial, we will work with dialogs. 
</p>

<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* NewSquare */
google_ad_slot = "0364418177";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 

<p>
Dialog windows or dialogs are an indispensable part of most modern GUI applications. 
A dialog is defined as a conversation between two or more persons. In a computer 
application a dialog is a window which is used to "talk" to the application. 
A dialog is used to input data, modify data, change the application settings etc. 
Dialogs are important means of communication between a user and a computer program. 
</p>


<h2>Message boxes</h2>

<p>
Message boxes are convenient dialogs that provide messages to the user of the application. 
The message consists of text and image data. 
</p>

<pre class="code">
#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial
#
# This program demonstrates
# MessageBox dialogs
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: July 2009

require 'Qt'


class QtApp < Qt::Widget

    slots 'showDialog()'

    def initialize
        super
        
        setWindowTitle "Message dialogs"
       
        init_ui
       
        resize 250, 150
        move 300, 300

        show
    end
    
    def init_ui
    
        grid = Qt::GridLayout.new self
        grid.setSpacing 2

        error = Qt::PushButton.new "Error", self
        warning = Qt::PushButton.new "Warning", self
        question = Qt::PushButton.new "Question", self
        information = Qt::PushButton.new "Information", self
        about = Qt::PushButton.new "About", self

        grid.addWidget error, 0, 0
        grid.addWidget warning, 0, 1
        grid.addWidget question, 1, 0
        grid.addWidget information, 1, 1
        grid.addWidget about, 2, 0

        connect(error, SIGNAL("clicked()"),
            self, SLOT("showDialog()"))
        
        connect(warning, SIGNAL("clicked()"),
            self, SLOT("showDialog()"))
            
        connect(question, SIGNAL("clicked()"),
            self, SLOT("showDialog()"))
            
        connect(information, SIGNAL("clicked()"),
            self, SLOT("showDialog()"))
            
        connect(about, SIGNAL("clicked()"),
            self, SLOT("showDialog()"))

    end   
    
    def showDialog
        
        button = sender

        if "Error" == button.text
            Qt::MessageBox.critical self, "Error", "Error loading file!"
        elsif "Warning" == button.text
            Qt::MessageBox.warning self, "Warning", "Operation not permitted!"
        elsif "Question" == button.text
            Qt::MessageBox.question self, "Question", "Are you sure to quit?"
        elsif "Information" == button.text
            Qt::MessageBox.information self, "Information", "Download completed."
        elsif "About" == button.text
            Qt::MessageBox.about self, "About", "ZetCode Ruby Qt tutorial."
        end
    end

end

app = Qt::Application.new ARGV
QtApp.new
app.exec
</pre>

<p>
We use the <code>GridLayout</code> manager to set up a grid of
five buttons. Each of the buttons shows a different message box. 
</p>

<pre class="explanation">
if "Error" == button.text
    Qt::MessageBox.critical self, "Error", "Error loading file!"
</pre>

<p>
In case we pressed the error button, we show the error dialog. 
We use static methods of the <code>MessageBox</code> class to show
the message boxes.  
</p>

<img src="/img/gui/qtruby/infodlg.png" alt="Information message dialog">
<div class="figure">Figure: Info dialog</div>


<h2>InputDialog</h2>

<p>
The <code>InputDialog</code> class provides a simple convenience dialog to get a single 
value from the user. The input value can be a string, a number or an item 
from a list. A label must be set to tell the user what they should enter.
</p>

<pre class="code">
#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial
#
# This program shows an input
# dialog
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: July 2009

require 'Qt'


class QtApp &lt; Qt::Widget

    slots 'showDialog()'

    def initialize
        super
        
        setWindowTitle "Input dialog"
       
        init_ui
       
        resize 400, 80
        move 300, 300

        show
    end
    
    def init_ui
    
        show = Qt::PushButton.new "Dialog", self

        connect(show, SIGNAL("clicked()"),
            self, SLOT("showDialog()"))

        show.move 20, 20

        @edit = Qt::LineEdit.new self
        @edit.move 130, 22


    end   
    
    def showDialog
        
        text = Qt::InputDialog.getText self, "Input Dialog",
            "Enter your name"
         
        if text != nil 
            name = text.strip
            if not name.empty?
                @edit.setText name
            end
        end
    end

end

app = Qt::Application.new ARGV
QtApp.new
app.exec
</pre>

<p>
In the code example, we have a button and a line edit. The button shows
an input dialog. We get some text and the text is shown in the line edit widget. 
</p>

<pre class="explanation">
text = Qt::InputDialog.getText self, "Input Dialog",
    "Enter your name"
</pre>

<p>
The <code>getText</code> static method creates the input dialog.
The text from the dialog is stored in the text variable. 
</p>

<pre class="explanation">
if text != nil 
    name = text.strip
    if not name.empty?
        @edit.setText name
    end
end
</pre>

<p>
Before we update the line edit, we ensure, that the text variable is
not null and that it is not empty and does not consists only from spaces. 
</p>


<img src="/img/gui/qtruby/inputdlg.png" alt="Input dialog">
<div class="figure">Figure: Input dialog</div>


<h2>ColorDialog</h2>

<p>
The <code>ColorDialog</code>  class provides a dialog widget for specifying 
colors. The color dialog's function is to allow users to choose colors.
</p>

<pre class="code">
#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial
#
# In this program, we use the
# ColorDialog to change the color
# of a label text
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: July 2009

require 'Qt'


class QtApp &lt; Qt::Widget

    slots 'showDialog()'

    def initialize
        super
        
        setWindowTitle "Color dialog"
       
        init_ui
       
        resize 400, 300
        move 300, 300

        show
    end
    
    def init_ui
    
        @label = Qt::Label.new "ZetCode Ruby Qt tutorial", self

        vbox = Qt::VBoxLayout.new self
        @label.setAlignment Qt::AlignCenter
        vbox.addWidget @label

    end   
    
    def mousePressEvent event

        color = Qt::ColorDialog.getColor

        if not color.isValid
            return
        end

        @label.setStyleSheet "QWidget { color: %s }" % color.name
    end
    
end

app = Qt::Application.new ARGV
QtApp.new
app.exec

</pre>

<p>
We show a some text in the center of the window. By clicking on the area of the
window, we show a color dialog. We change the text foreground color to the selected color
from the dialog. 
</p>

<pre class="explanation">
def mousePressEvent event
    ...
end
</pre>

<p>
In order to receive mouse press events for our window, we must reimplement the 
<code>mousePressEvent</code> method.
</p>

<pre class="explanation">
color = Qt::ColorDialog.getColor
</pre>

<p>
The <code>ColorDialog</code> is being created. The selected
color is stored in the color variable.
</p>

<pre class="explanation">
@label.setStyleSheet "QWidget { color: %s }" % color.name
</pre>

<p>
Here we update the foreground color of the label's text.
</p>

<img src="/img/gui/qtruby/colordlg.png" alt="ColorDialog">
<div class="figure">Figure: ColorDialog</div>


<h2>FontDialog</h2>

<p>
The <code>FontDialog</code> class provides a dialog widget for selecting a font.
</p>

<pre class="code">
#!/usr/bin/ruby

# ZetCode Ruby Qt tutorial
#
# In this program, we use the
# FontDialog to change the font
# of a label text
#
# author: jan bodnar
# website: www.zetcode.com
# last modified: July 2009

require 'Qt'


class QtApp &lt; Qt::Widget

    slots 'showDialog()'

    def initialize
        super
        
        setWindowTitle "Font dialog"
       
        init_ui
       
        resize 400, 300
        move 300, 300

        show
    end
    
    def init_ui
    
        @label = Qt::Label.new "ZetCode Ruby Qt tutorial", self

        vbox = Qt::VBoxLayout.new self
        @label.setAlignment Qt::AlignCenter
        vbox.addWidget @label

    end   
    
    def mousePressEvent event

        ok = Qt::Boolean.new
        font = Qt::FontDialog.getFont ok
        
        if not ok 
            return
        end

        @label.setFont font
    end
end

app = Qt::Application.new ARGV
QtApp.new
app.exec
</pre>

<p>
This example is similar to the previous one. This time, we change
the font of the text. 
</p>

<pre class="explanation">
font = Qt::FontDialog.getFont ok
</pre>

<p>
The <code>FontDialog</code> is being created. 
</p>

<pre class="explanation">
if not ok 
    return
end
</pre>

<p>
The boolean ok variable is true, if we clicked on the OK button of the dialog. 
We return from the method, if the cancel button was pressed. 
</p>

<pre class="explanation">
@label.setFont font
</pre>

<p>
We update the label to the newly selected font. 
</p>


<img src="/img/gui/qtruby/fontdlg.png" alt="FontDialog">
<div class="figure">Figure: FontDialog</div>


<p>
In this part of the Ruby Qt tutorial, we worked with dialog windows. 
</p>


<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified April 27, 2009  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

